<template>
    <n-form
        ref="formRef"
        label-placement="left"
        :label-width="80"
        :model="form"
        :rules="rules"
    >
        <n-card title="基础信息">
            <n-form-item label="头像" path="avatar">
                <jb-avatar v-model:src="form.avatar" :upload="true"></jb-avatar>
            </n-form-item>
            <n-form-item label="姓名" path="name">
                <n-input v-model:value="form.name" placeholder="请输入用户姓名"/>
            </n-form-item>
            <n-form-item label="性别" path="sex">
                <jb-radio-group
                    v-model:value="form.sex"
                    :value-to-number="true"
                    url="/api/admin/dictionary/options?typeKey=sex"
                ></jb-radio-group>
            </n-form-item>
            <n-form-item label="年龄" path="age">
                <n-input v-model:value="form.age" placeholder="请输入用户年龄"/>
            </n-form-item>
            <n-form-item label="手机号" path="phone">
                <n-input
                    v-model:value="form.phone"
                    placeholder="请输入用户手机号"
                />
            </n-form-item>
            <n-form-item label="E-Mail" path="email">
                <n-input
                    v-model:value="form.email"
                    placeholder="请输入用户邮箱"
                />
            </n-form-item>
        </n-card>
    </n-form>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import type {FormInst, FormRules} from 'naive-ui'
import XEUtils from 'xe-utils'
import {Rules} from '@/utils'
import {JBoltApi} from '@/utils/request'
import {useResetableData} from '@/hooks/common/use-resetable-data'
import {ResData} from '@/typings/request'
import {storeToRefs} from "pinia";
import {useAuthStore} from "@/store";

const props = withDefaults(
    defineProps<{
        id?: string
    }>(),
    {
        id: ''
    }
)

const { userInfo } = storeToRefs(useAuthStore())

/** 表单相关 start */
const formRef = ref<FormInst | null>()

interface UserType {
    id: string
    name: string
    sn: string
    sex: number
    age: string
    phone: string
    email: string
    username: string
    password: string
    roles: string[]
    avatar: string
    deptId: string
    posts: string[]
}

const form = useResetableData<UserType>({
    id: '',
    name: '',
    sex: 1,
    age: '',
    email: '',
    phone: '',
    avatar: '',
})
const rules: FormRules = {
    name: new Rules().required('请输入姓名').value,
    username: new Rules().required('请输入用户名').value,
    sn: new Rules().minLength(4).value,
    sex: new Rules().required('请选择用户性别').value,
    password: new Rules().required('请选择密码').value,
    roles: new Rules().required('请选择角色').value,
    age: new Rules()._pint().maxLength(3).value,
    email: new Rules().email().value,
    phone: new Rules().phone().value
}

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()

    let url = '/api/admin/user/updateMineInfo'
    let data: any = XEUtils.clone(form, true)
    let res = await JBoltApi.tryPost(url,data)
    return res.data
}

function loadEditData() {
    JBoltApi.get<ResData>(`/api/admin/user/mineInfo`).then(({error, result}) => {
        if (error) return
        let {user} = result.data
        form._reset(user)
    })
}

onMounted(() => {
    if(userInfo.value.id){
        loadEditData()
    }
})

defineExpose({
    submit
})

/** 表单相关 end */

</script>
<style scoped></style>
